<template>
  <a-card :bordered="false">
    <div class="top-box">
      <div class="title">{{query.type == 'edit' ? '编辑':'添加'}}商品</div>
      <div>
        <a-button @click="handleReload" style="margin-right:10px;">
          <template #icon>
            <reload-outlined />
          </template>
          刷新
        </a-button>
        <a-button @click="handleClose">
          <template #icon>
            <close-circle-outlined />
          </template>
          关闭
        </a-button>
      </div>
    </div>

    <a-form :model="state.form" :label-col="{ span: 3 }" :wrapper-col="{ span: 10 }" autocomplete="off" @finish="handleSubmit">
      <a-form-item label="选择分类" name="class_id" :rules="[{ required: true, message: '请选择一级类目名称' }]">
        <a-select v-model:value="state.form.class_id" placeholder="请选择一级类目名称">
          <a-select-option v-for="item in list" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="商品编码">
        <a-input disabled placeholder="系统自动生成" />
      </a-form-item>

      <a-form-item label="商品名称" name="goods_name" :rules="[{ required: true, message: '请输入商品名称' }]">
        <a-input v-model:value="state.form.goods_name" placeholder="请输入商品名称" />
      </a-form-item>

      <a-form-item label="商品条码" name="goods_code" :rules="[{ required: true, message: '请输入商品条码' }]">
        <a-input v-model:value="state.form.goods_code" placeholder="请输入商品条码" />
      </a-form-item>

      <a-form-item label="商品供货价" name="goods_price" :rules="[{ required: true, message: '请输入商品供货价' }]">
        <a-input-number
          v-model:value="state.form.goods_price"
          :controls="false"
          placeholder="请输入商品供货价"
          :parser="value=>/^\d+$/.test(value)?value : 1"
          style="width: 100%"
        />
      </a-form-item>

      <a-form-item label="商品建议售价" name="goods_market_price" :rules="[{ required: true, message: '请输入建议售价' }]">
        <a-input-number v-model:value="state.form.goods_market_price" :controls="false" placeholder="请输入建议售价" style="width: 100%" />
      </a-form-item>

      <a-form-item label="第三方对比价图片" :wrapper-col="{ span: 16 }">
        <a-form-item label="京东" name="jd_images" :label-col="{ span: 3 }">
          <one-upload-img @upload="handleJdImages" @remove="handleRemoveJdImages" :imgUrl="state.form.jd_images" />
        </a-form-item>

        <a-form-item label="天猫" name="tm_images" :label-col="{ span: 3 }">
          <one-upload-img @upload="handleTmImages" @remove="handleRemoveTmImages" :imgUrl="state.form.tm_images" />
          <!-- <oneUpload @fileimgUrl="handleTmImages" :imgUrl="state.form.tm_images" /> -->
        </a-form-item>

        <a-form-item label="拼多多" name="pdd_images" :label-col="{ span: 3 }">
          <one-upload-img @upload="handlePddImages" @remove="handleRemovePddImages" :imgUrl="state.form.pdd_images" />
          <!-- <oneUpload @fileimgUrl="handlePddImages" :imgUrl="state.form.pdd_images" /> -->
        </a-form-item>
      </a-form-item>

      <a-form-item label="商品图片" name="goods_images" :rules="[{ required: true, message: '请上传商品图片' }]">
        <oneUpload @fileimgUrl="handleGoodsImages" :maxCount="6" :multiple="true" :imgUrl="state.form.goods_images" />
      </a-form-item>

      <a-form-item label="商品详情" name="goods_content" :wrapper-col="{ span: 16 }" :rules="[{ required: true, message: '请输入商品详情' }]">
        <BasicEditor @change="handleGoodsContent" :value="state.form.goods_content" :token="state.token"></BasicEditor>
      </a-form-item>

      <a-form-item label="状态" name="goods_status" :rules="[{ required: true, message: '请选择商品的状态' }]">
        <a-radio-group v-model:value="state.form.goods_status">
          <a-radio :value="0">提交审核</a-radio>
          <a-radio :value="2">保存草稿</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">确定</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>
<script setup>
import { ReloadOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
import { reactive, ref } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import { useRouter, useRoute } from 'vue-router'

import oneUploadImg from '@/components/one-upload-img.vue'
import oneUpload from '@/components/one-upload.vue'
import BasicEditor from '@/components/BasicEditor.vue'
import { seaClassList, addSeaGoods, seaCloudGoodsDetail, upload_qiniu } from '../../config/api'

const router = useRouter()
const route = useRoute()

let state = reactive({
  form: {
    class_id: undefined,
    goods_name: '',
    goods_code: '',
    goods_price: '',
    goods_market_price: '',
    goods_master_image: '',
    goods_content: '',
    goods_images: '',
    jd_images: '',
    tm_images: '',
    pdd_images: '',
    goods_status: ''
  },
  token: ''
})
const list = ref([])

const query = reactive({
  id: '',
  type: ''
})

onMounted(() => {
  handleGetClassifyList()
  console.log(route.query)
  query.id = route.query.id
  query.type = route.query.type
  if (query.id) {
    getGoodsDetails(query.id)
  }
})

// 获取详情
const getGoodsDetails = async goods_id => {
  const res = await seaCloudGoodsDetail({ goods_id })
  // console.log(res.data)
  const data = res.data
  state.form = data
  console.log('2222222222',data)
  // state = {
  //   class_id: data.class_id,
  //   goods_name: data.goods_name,
  //   goods_code: '',
  //   goods_price: '',
  //   goods_market_price: '',
  //   goods_master_image: '',
  //   goods_content: '',
  //   goods_images: '',
  //   jd_images: '',
  //   tm_images: '',
  //   pdd_images: '',
  //   goods_status: ''
  // }
}

//提交
const handleSubmit = async data => {
  data.goods_master_image = data.goods_images.split(',')[0]
  console.log(data)
  const res = await addSeaGoods(data)
  console.log(res)
}

//商品详情
const handleGoodsContent = value => {
  state.form.goods_content = value
  console.log('value', value)
}

//上传商品图片
const handleGoodsImages = value => {
  // console.log(value)
  // state.goods_master_image = typeof value == 'string' ? value : value[0]
  state.form.goods_images = value.toString()
  console.log(state.form.goods_master_image, '--state.goods_images:', state.form.goods_images)
}

//删除拼多多对价图
const handleRemovePddImages = value => {
  state.form.pdd_images = value
  console.log('删除拼多多对价图', state.form.pdd_images)
}
// 上传拼多多对比价图
const handlePddImages = value => {
  state.form.pdd_images = value
  console.log('拼多多对比价图', state.form.pdd_images)
}

//删除天猫对价图
const handleRemoveTmImages = value => {
  state.form.tm_images = value
  console.log('删除天猫对价图', state.form.tm_images)
}
//上传天猫对比价图
const handleTmImages = value => {
  state.form.tm_images = value
  console.log('天猫对比价图', state.form.tm_images)
}

//删除京东对价图
const handleRemoveJdImages = value => {
  state.form.jd_images = value
  console.log('删除京东对价图', state.form.jd_images)
}
//上传京东对比价图
const handleJdImages = value => {
  state.form.jd_images = value
  console.log('京东对比价图', state.form.jd_images)
}

//刷新
const handleReload = () => {
  router.go(0)
}

//关闭
const handleClose = () => {
  router.go(-1)
}

//获取以及分类
const handleGetClassifyList = async () => {
  const res = await seaClassList()
  list.value = res.data.data
}
</script>
<style scoped lang="scss">
.top-box {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f6f6f6;
  margin-bottom: 10px;

  .title {
    font-size: 16px;
    color: #1d2129;
    font-weight: bold;
  }
}
</style>
